import React from 'react'
import {useNavigate} from 'react-router-dom'
type Props = {}

function Detail({ }: Props) {
    const navigate=useNavigate()
    const godet=()=>{
        navigate('/home/index')
    }
  return (
    <div style={{ background: 'rgb(244 241 241)', width: '100%', height: '100%' }}>
      <div className="order-details" style={{
        width: '100%',
        height: '250px',
        margin: '0 auto',
        background: 'rgb(27, 169, 186)',
        borderRadius: '0 0 15px 15px'
      }}>
        <div className="order-detailsHeader" style={{
          display: 'flex',
          justifyContent: 'space-between',
          textAlign: 'center',
          padding: '5px 6px',
        }}>
          <div onClick={()=>{godet()}} className="order-detailsLeft" style={{ color: '#ffffff' }}>&</div>
          <div className="order-detailsRight" style={{ color: '#ffffff' }}>订单详情</div>
          <div></div>
        </div>
        <div className="order-detailsCenten" style={{
          display: 'flex', justifyContent: 'space-between', padding: '5px 20px', marginTop: '30px'
        }}>
          <img src="" alt="暂未图片" className='order-detailsImages' style={{ border: '1px solid #ffffff', width: '70', height: '70', fontSize: '10px' }} />
          <div className="order-detailsCentenLeft" style={{ marginLeft: '10px' }}>
            <div className='ticket-issuedSuccessfully' style={{ fontSize: "24px", color: '#ffffff' }}>出票成功</div>
            <div style={{ marginTop: '5px', fontSize: "12px", color: '#ffffff' }}>请您持购证件在车站或代售点取票后按时乘车</div>
          </div>
        </div>
      </div>
      <div className="order-forGoods" style={{ width: '97%', height: '37%', zIndex: '999', position: 'relative', top: '-110px', margin: '0 auto', borderRadius: '10px', background: '#ffffff', }}>
        <div className="order-forGoodsPadding" style={{ width: '94%', height: '98%', margin: '0 auto' }}>
          <div className="order-forGoodsName" style={{ padding: '15px 0px', color: 'rgb(41 39 39)' }}>
            取票号：BW123455
          </div>
          <div className="order-forGoodsDate" style={{ display: 'flex', justifyContent: 'space-between', color: '#ccc' }}>
            <div>06月15日周二</div>
            <div>06月15日周二</div>
          </div>
          <div className="order-forGoodsTime" style={{ display: 'flex', justifyContent: 'space-between', marginTop: '10px', color: 'black', fontSize: '25px', fontWeight: '600' }}>
            <div>06：24</div>
            <div>经停信息</div>
            <div>07：21</div>
          </div>
          <div className="order-forGoodslocation" style={{ display: 'flex', justifyContent: 'space-between', marginTop: '10px', color: 'rgb(41 39 39)' }}>
            <div>合肥南</div>
            <div>G7740</div>
            <div>南京南</div>
          </div>
          <div className="order-forGoodsInformation">
            <div className="order-forGoodsTitle" style={{ display: 'flex', justifyContent: 'space-between', marginTop: '10px', color: 'black', fontSize: '18px', fontWeight: '800' }}>
              <div>王一默<span style={{ color: '#ccc', border: '1px solid #ccc', padding: '3px 3px', fontSize: '12px', marginLeft: '5px' }}>成人票</span></div>
              <div>一等座￥107</div>
            </div>
            <div className="order-forGoodsCenter" style={{ display: 'flex', justifyContent: 'space-between', marginTop: '10px', color: '#ccc' }}>
              <div>身份证 110102**********28</div>
              <div><span style={{ color: 'green', border: '1px solid green', padding: '3px 3px', fontSize: '12px', marginRight: '5px' }}>靠窗</span>03车厢16A号</div>
            </div>
            <div style={{ marginTop: '10px', color: 'green' }}>出票成功</div>
          </div>
        </div>
      </div>
      <div className="order-No." style={{ width: '97%', height: '15%', background: '#ffffff', margin: '0 auto', borderRadius: '10px', marginTop: '-95px' }}>
        <div className="order-No.Ti" style={{ display: 'flex', justifyContent: 'space-between', padding: '20px 11px', color: 'rgb(41 39 39)' }}>
          <div>订单号</div>
          <div>E369941878</div>
        </div>
        <div className="order-No.Phone" style={{ display: 'flex', justifyContent: 'space-between', padding: '0 11px', color: 'rgb(41 39 39)' }}>
          <div>通知手机</div>
          <div>188123456789</div>
        </div>
      </div>
      <div className="ADULT" style={{ width: '97%', height: '15%', background: '#ffffff', margin: '0 auto', borderRadius: '10px', marginTop: '15px' }}>
        <div className="ADULT-vote" style={{ display: 'flex', justifyContent: 'space-between', padding: '20px 11px', color: 'rgb(41 39 39)' }}>
          <div>成人票</div>
          <div>￥107x1</div>
        </div>
        <div className="order-amount" style={{ display: 'flex', justifyContent: 'space-between', padding: '0 11px', color: 'rgb(41 39 39)' }}>
          <div>订单总计</div>
          <div style={{ color: 'orange', fontSize: '23px' }}>￥107</div>
        </div>
      </div>
    </div >
  )
}

export default Detail
